<template>
  <el-row>
    <!-- top -->
    <el-col>
      <el-row>
        <el-col :span="2">
          <el-button class="dc_b" type="primary" round size="mini" @click="rankExport">导出</el-button>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="筛选镇街" clearable @change="getVisit" v-if="street_id">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="14">
          <el-input placeholder="关键词搜索" v-model="searchs" @change="change">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="table_c" v-if="tableData.year">
      <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f5f6f9' }" :data="tableData.list"
        style="width: 100%">
        <el-table-column prop="ranking" label="排名" width="50">
        </el-table-column>
        <el-table-column prop="company" label="申请人名称" >
        </el-table-column>
        <el-table-column prop="rank" label="上月排名" width="80">
        </el-table-column>
        <el-table-column prop="change_rank" label="排名变化" width="80">
        </el-table-column>
        <!-- <el-table-column prop="score" label="排名变化" width="80">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.rank }}</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="apper" label="外观" width="150">
          <!-- <template slot-scope="scope">
            <div class="text_margin">
              总量
            </div>
            <div class="text_margin">
              发明
            </div>
            <div class="text_margin">
              实用新型
            </div>
            <div class="text_margin">
              外观设计
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="auth" label="发明" width="150">
          <!-- <template slot-scope="scope">
            <div class="zl_one text_margin">
              {{ scope.row.c_num }}
            </div>
            <div class="text_margin">
              {{ scope.row.c_agent }}
            </div>
            <div class="text_margin">
              {{ scope.row.c_news }}
            </div>
            <div class="text_margin">
              {{ scope.row.c_apper }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="news" label="新型" width="150">
          <!-- <template slot-scope="scope">
            <div class="zl_one text_margin">
              {{ scope.row.b_num }}
            </div>
            <div class="text_margin">
              {{ scope.row.b_agent }}
            </div>
            <div class="text_margin">
              {{ scope.row.b_news }}
            </div>
            <div class="text_margin">
              {{ scope.row.b_apper }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="num" label="总量" width="150">
          <!-- <template slot-scope="scope">
            <div class="zl_one text_margin">
              {{ scope.row.a_num }}
            </div>
            <div class="text_margin">
              {{ scope.row.a_agent }}
            </div>
            <div class="text_margin">
              {{ scope.row.a_news }}
            </div>
            <div class="text_margin">
              {{ scope.row.a_apper }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="cro" label="主要代理机构" >
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button class="add_button" @click="handleClick(scope.row)" size="mini" round>添加到待走访</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import { companyStreet, visitDetailtwo } from '@/api/newuser'

export default {
  components: {},
  props: {
    tableData: {
      type: Object
    }
  },
  data() {
    return {
      searchs: '',
      value: '',
      options: [],
      street_id: false,
    };
  },
  mounted() {
    if (this.$store.state.user.com_id == 0 && this.$store.state.user.street_id == 0) {
      this.street_id = true
      companyStreet().then(res => {
        this.options = res;
        // console.log(res);
      })
    }
  },
  methods: {
    getVisit(street_type) {
      this.$emit('getVisit', street_type)
    },
    handleClick(row) {
      this.$router.push(
        {
          path: '/addWaitvisit',
          query: {
            company_name: row.company,
            company_id: row.company_id,
          }
        }
      )
    },
    tableclick(row) {

      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          company_id: row.company_id,
          company_name: row.company,
        }
      })

      //判断是否有走访记录
      // visitDetailtwo({
      //   company_id: row.company_id
      // }).then(res => {
      //   // console.log(res);
      //   if (res.list.length == 0) {
      //     this.$router.push(
      //       {
      //         path: '/addWaitvisit',
      //         query: {
      //           company_name: row.company,
      //           company_id: row.company_id,
      //         }
      //       }
      //     )
      //   } else {
      //     this.$router.push({
      //       path: '/workEnterprisevisit',
      //       query: {
      //         company_id: row.company_id,
      //       }
      //     })
      //   }
      // })
    },
    rankExport() {
      this.$emit('rankExport')
    },
    change(value) {
      this.$emit('change', value)
    }
  },
};
</script>

<style scoped lang="less">
.top_color {
  color: #23B899;

  i {
    font-weight: bolder;
  }
}

.bot_color {
  color: #FF5F58;

  i {
    font-weight: bolder;
  }
}

.i_display {
  display: none;

}

/*::v-deep input {*/
/*  border-radius: 30px;*/
/*  height: 38px;*/
/*  line-height: 38px;*/
/*}*/

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;

}

.zl_one {
  color: #387DFF;
}

.dc_b {
  font-size: 16px;
  padding: 7px 40px;
  width: 124px;
  height: 38px;
  background: #387DFF;
  border-radius: 19px;
}

.add_button {
  color: #3E7EF5;
  background-color: #ecf3ff;
  border: none;
  font-size: 14px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  color: #334681;
}

.text_margin {
  margin: 10px 0;
}

.table_c {
  margin-top: 15px;
}

::v-deep .has-gutter tr th {
  font-size: 10px;
  font-weight: initial;
}

::v-deep .has-gutter th:nth-child(3),
::v-deep .has-gutter th:nth-child(4),
::v-deep .has-gutter th:nth-child(5),
::v-deep .has-gutter th:nth-child(6),
::v-deep .has-gutter th:nth-child(7),
::v-deep .has-gutter th:nth-child(8) {
  text-align: center;
}

::v-deep .has-gutter tr th:nth-child(10) {
  text-align: center;
}

// :v-deep .has-gutter tr th:last-child {
//   text-align: center;
// }
::v-deep .el-table__row td:nth-child(3),
::v-deep .el-table__row td:nth-child(4),
::v-deep .el-table__row td:nth-child(5),
::v-deep .el-table__row td:nth-child(6),
::v-deep .el-table__row td:nth-child(7),
::v-deep .el-table__row td:nth-child(8) {
  text-align: center;
}


@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
